/**
 * 加载 贴图
 */

import {CanvasTexture, TextureLoader} from "three";
import {CanvasDraw} from "./canvasDraw";
import {picInfo} from '../json/info.js'

//添加贴图
const textureLoader: TextureLoader = new TextureLoader()
//load中的url路径, 使用/访问, public目录下的文件直接被打包到根路径下的, 因此直接访问根路径/进行获取图片,

//返回的为贴图对象
export const picTexture = textureLoader.load('/images/cat.jpg')

//墙面贴图
export const wallDisplay = textureLoader.load('/wall/wall_Displacement.jpg')
export const wallRoughness = textureLoader.load('/wall/wall_Roughness.jpg')
export const wallMap = textureLoader.load('/wall/wall_Color.jpg')

//地面贴图
export const dmDisplayTexture = textureLoader.load('/dm/Marble016_1K_Displacement.jpg')
export const dmMapTexture = textureLoader.load('/dm/Marble016_1K_Color.jpg')
export const dmRoughnessTexture = textureLoader.load('/dm/Marble016_1K_Roughness.jpg')

//木质贴图
export const woodDisplayTexture = textureLoader.load('/wood/WoodFloor024_1K_Displacement.jpg')
export const woodMapTexture = textureLoader.load('/wood/WoodFloor024_1K_Color.jpg')
export const woodRoughnessTexture = textureLoader.load('/wood/WoodFloor024_1K_Roughness.jpg')

//使用canvas绘制, 生成贴图
export const picInfoTexture = new CanvasTexture(new CanvasDraw(160,90).draw((ctx) => {
    //将canvas贴图背景设置白色
    ctx.beginPath()
    ctx.rect(0,0, 160,90);
    ctx.fillStyle = '#fff'
    ctx.fill();
    ctx.closePath()

    const info = picInfo[0]
    ctx.beginPath()
    ctx.strokeStyle = 'blue'
    ctx.textAlign = 'center'
    ctx.strokeText(info.name, 80, 25)
    ctx.strokeText(info.author, 80, 45)
    ctx.strokeText(info.date, 80, 65)
})/*.preview()*/.canvas)
